<template>
  <div>
    <router-link to="/home" v-slot="props">
      <!-- <button>首页</button> -->
      <button>{{ props.href }}</button>
      <!-- <nav-bar title="首页"></nav-bar> -->
    </router-link>
    <router-link to="/about">关于</router-link>
    <router-link to="/user/aaa">用户</router-link>
    <router-link to="/category">分类</router-link>

    <button @click="jumpToAbout">关于</button>

    <router-view v-slot="props">
      <transition name="transition1">
        <keep-alive>
          <component :is="props.Component"></component>
        </keep-alive>
      </transition>
    </router-view>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
import NavBar from "./components/NavBar.vue";

export default {
  components: { NavBar },
  name: "App",
  // methods: {
  //   jumpToAbout() {
  //     this.$router.push("/about");
  //   },
  // },
  setup() {
    const router = useRouter();

    const jumpToAbout = () => {
      // router.push("/about");
      // router.push({
      //   path: "/about",
      //   query: {
      //     name: "why",
      //   },
      // });

      // router.replace("/about");
      router.replace({
        path: "/about",
        query: {
          name: "why",
        },
      });
    };

    return {
      jumpToAbout,
    };
  },
};
</script>

<style>
.router-link-active {
  color: red;
}

.transition1-enter-from,
.transition1-leave-to {
  opacity: 0;
}

.transition1-enter-active,
.transition1-leave-active {
  transition: opacity 1s ease;
}
</style>
